<!-- modules/VerticalMenu.vue - 垂直布局菜单 -->
<template>
    <!-- 🚀 传送到主侧边栏 -->
    <Teleport v-if="teleportReady"  to="#sider-menu-container-primary">
      <div class="vertical-menu-wrapper">
        <el-menu
          mode="vertical"
          :default-active="$route.path"
          :collapse="collapsed"
          :unique-opened="false"
          :router="true"
          class="vilan-menu vertical-menu"
          :collapse-transition="false"
        >
          
          <!-- 🎯 静态数据渲染 -->
          <template v-if="!useDynamic">
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <template #title>仪表板</template>
            </el-menu-item>
            
            <el-sub-menu index="system">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/system/user">
                <el-icon><User /></el-icon>
                <template #title>用户管理</template>
              </el-menu-item>
              <el-menu-item index="/system/role">
                <el-icon><UserFilled /></el-icon>
                <template #title>角色管理</template>
              </el-menu-item>
              <el-menu-item index="/system/menu">
                <el-icon><Menu /></el-icon>
                <template #title>菜单管理</template>
              </el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="user">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>用户中心</span>
              </template>
              <el-menu-item index="/user/profile">
                <el-icon><UserFilled /></el-icon>
                <template #title>个人资料</template>
              </el-menu-item>
              <el-menu-item index="/user/setting">
                <el-icon><Tools /></el-icon>
                <template #title>账户设置</template>
              </el-menu-item>
            </el-sub-menu>
            
            <el-menu-item index="/about">
              <el-icon><InfoFilled /></el-icon>
              <template #title>关于系统</template>
            </el-menu-item>
          </template>
          
          <!-- 🎯 动态数据渲染 -->
          <template v-else>
            <template v-for="item in menuData" :key="item.key">
              <!-- 有子菜单的项 -->
              <el-sub-menu v-if="item.children?.length" :index="item.key">
                <template #title>
                  <el-icon v-if="item.icon">
                    <component :is="getMenuIcon(item.icon)" />
                  </el-icon>
                  <span>{{ item.label }}</span>
                </template>
                
                <el-menu-item
                  v-for="child in item.children"
                  :key="child.key"
                  :index="child.path"
                >
                  <el-icon v-if="child.icon">
                    <component :is="getMenuIcon(child.icon)" />
                  </el-icon>
                  <template #title>{{ child.label }}</template>
                </el-menu-item>
              </el-sub-menu>
              
              <!-- 无子菜单的项 -->
              <el-menu-item v-else :index="item.path">
                <el-icon v-if="item.icon">
                  <component :is="getMenuIcon(item.icon)" />
                </el-icon>
                <template #title>{{ item.label }}</template>
              </el-menu-item>
            </template>
          </template>
          
        </el-menu>
      </div>
    </Teleport>
  </template>
  
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import {
  Odometer,
  Setting,
  User,
  UserFilled,
  Menu,
  Avatar,
  Tools,
  InfoFilled,
  Document,
  DataBoard,
  EditPen
} from '@element-plus/icons-vue'

const props = defineProps({
  useDynamic: Boolean,
  menuData: Array,
  config: Object
})

const route = useRoute()

// 🎯 调试：监听 menuData 变化
console.log('🔍 [VerticalMenu] Props 接收:', {
  useDynamic: props.useDynamic,
  menuDataCount: props.menuData?.length || 0,
  menuData: props.menuData
})

// 🎯 控制 Teleport 时机
const teleportReady = ref(false)
  // 🎯 等待容器就绪
onMounted(async () => {
  console.log('📍 VerticalMenu 组件已挂载')
  
  // 等待DOM更新完成
  await nextTick()
  
  // 检查目标容器
  const target = document.querySelector('#sider-menu-container-primary')
  
  if (target) {
    teleportReady.value = true
    console.log('✅ 菜单容器就绪，启用 Teleport')
  } else {
    console.warn('⚠️ 容器不存在，延迟重试')
    // 延迟重试
    setTimeout(() => {
      const retryTarget = document.querySelector('#sider-menu-container-primary')
      if (retryTarget) {
        teleportReady.value = true
        console.log('✅ 延迟重试成功')
      }
    }, 100)
  }
})

// 🎯 折叠状态（从 menuConfig 获取）
const collapsed = computed(() => props.config?.collapsed || false)

function getMenuIcon(iconName) {
  // 🎯 图标映射表（兼容小写和大写）
  const iconMap = {
    // 小写格式（旧版）
    'dashboard': Odometer,
    'system': Setting,
    'user': Avatar,
    'role': UserFilled,
    'menu': Menu,
    'tools': Tools,
    'info': InfoFilled,
    'document': Document,
    'databoard': DataBoard,
    'editpen': EditPen,
    
    // 大写格式（Element Plus 原名）
    'Odometer': Odometer,
    'Setting': Setting,
    'Avatar': Avatar,
    'User': User,
    'UserFilled': UserFilled,
    'Menu': Menu,
    'Tools': Tools,
    'InfoFilled': InfoFilled,
    'Document': Document,
    'DataBoard': DataBoard,
    'EditPen': EditPen
  }
  return iconMap[iconName] || Menu
}
</script>
  <style lang="scss" scoped>
  .vertical-menu-wrapper {
    height: 100%;
    overflow: hidden;
  }
  
  :deep(.vertical-menu) {
    height: 100%;
    overflow-y: auto;
    
    // 🎯 隐藏滚动条
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    scrollbar-width: none;
  }
  </style>